﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>OCR 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 OCR" />
    <meta name="description" content="Script Services 识别图片内容" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="识别图片内容">
                                    <svg class="titleicon"><use xlink:href="#ocr"></use></svg> OCR
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <div class="custom-file">
                    <input id="txtFile" type="file" class="custom-file-input" accept="image/*">
                    <label class="custom-file-label" id="pr">选择图片 或 拖拽图片文件 或 Ctrl + V 粘贴图片</label>
                </div>
                <div class="input-group-prepend">
                    <button class="btn btn-info" title="逆时针旋转 5°" id="btnRotateLeft"><i class="fa fa-rotate-left"></i></button>
                </div>
                <div class="input-group-prepend">
                    <button class="btn btn-info" title="顺时针旋转 5°" id="btnRotateRight"><i class="fa fa-rotate-right"></i></button>
                </div>
                <div class="input-group-prepend">
                    <button class="btn btn-info" title="重置" id="btnReset"><i class="fa fa-refresh"></i></button>
                </div>
                <div class="input-group-prepend">
                    <button class="btn btn-warning" id="btnOcr">识别</button>
                </div>
            </div>
            <div class="mt-3">
                <div class="img-container">
                    <img id="imgview">
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <textarea class="form-control d-none my-3 min300" id="txtResult" placeholder="这里显示识别结果"></textarea>
        </div>
    </div>
</div>

<link href='https://cdn.jsdelivr.net/npm/cropperjs@1.5.11/dist/cropper.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/cropperjs@1.5.11/dist/cropper.min.js'></script>


<script>
    var pg = {
        init: function () {

            $('#btnRotateLeft').click(function () {
                if (pg.cp) {
                    pg.cp.rotate(-5)
                }
            });

            $('#btnRotateRight').click(function () {
                if (pg.cp) {
                    pg.cp.rotate(5)
                }
            });

            $('#btnReset').click(function () {
                if (pg.cp) {
                    pg.cp.reset()
                }
            });

            $('#btnOcr').click(function () {
                pg.scan();
            });

            //接收文件
            ss.receiveFiles(function (files) {
                var isImg = false;
                for (var i = 0; i < files.length; i++) {
                    if (files[i].type.indexOf("image") != -1) {
                        isImg = true;
                        pg.iv.src = URL.createObjectURL(files[i]);
                        pg.crop();
                        break;
                    }
                }
                if (!isImg) {
                    jz.alert('不是图片哦');
                }
            }, "#txtFile");
        },

        iv: document.getElementById('imgview'),

        crop: function () {
            if (pg.cp) {
                pg.cp.destroy();
            }
            pg.cp = new Cropper(pg.iv, { aspectRatio: NaN });
        },

        //将base64转换为blob
        dataURLtoBlob: function (dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        //将blob转换为file
        blobToFile: function (theBlob, fileName) {
            theBlob.lastModifiedDate = new Date();
            theBlob.name = fileName;
            return theBlob;
        },

        //描述
        dodesc: function (msg) {
            $('#pr').html(msg == null ? '选择图片 或 拖拽图片文件 或 Ctrl + V 粘贴图片' : msg);
        },

        //扫码识别
        scan: function () {
            if (pg.cp) {
                pg.dodesc('正在上传...');

                var base64Data = pg.cp.getCroppedCanvas().toDataURL('image/jpeg');
                var blob = pg.dataURLtoBlob(base64Data);
                var file = pg.blobToFile(blob, "ocr.jpg");

                //上传
                var formData = new FormData();
                formData.append("file", file);

                $.ajax({
                    url: `${ss.apiServer}/aip/ocr`,
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    xhr: function () {
                        xhr = $.ajaxSettings.xhr();
                        xhr.upload.addEventListener('progress', function (e) {
                            var rate = ((e.loaded / e.total) * 100).toFixed();
                            if (rate < 100) {
                                pg.dodesc('已上传 ' + rate + '%');
                            } else {
                                pg.dodesc('正在识别...');
                            }
                        })
                        return xhr;
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.code == 200 && data.data.words_result) {
                            var wrs = [];
                            $.each(data.data.words_result, function () {
                                wrs.push(this.words);
                            });
                            $('#txtResult').removeClass('d-none').val(wrs.join('\r\n'));
                            document.documentElement.scrollTo(0, document.body.scrollHeight)
                        } else {
                            jz.alert('OCR接口异常')
                        }
                    },
                    error: function () {
                        jz.alert("上传出错");
                    },
                    complete: function () {
                        pg.dodesc();
                    }
                });
            }
        }
    }

    pg.init();
</script>
        </div>
            <a href="javascript:ss.toTop();" class="totop" title="返回顶部">ˆ</a>
</body>
</html>
